<template>
  <div class="market-detail-cnt">
    <Skeleton v-show="!info" showSkeleton="4" />
    <div class="market-detail-page" v-if="info && !showPreview">
      <!-- 新手引导 -->
      <hint-tire></hint-tire>
      <!-- 顶部swipe -->
      <div class="top-swipe-container">
        <van-swipe @change="swipeChange" :initial-swipe="swipeCurrent">
          <van-swipe-item v-for="(item,index) in info.bannerList" :key="item.id">
            <div
              class="swipe-item"
              :style="{backgroundImage:'url(' + item.imgUrl + ')'}"
              @click.stop="photoHandle(item.id)"
            ></div>
          </van-swipe-item>
          <div
            class="custom-indicator"
            slot="indicator"
          >{{ swipeCurrent + 1 }}/{{info.bannerList.length}}</div>
        </van-swipe>
        <div
          class="panorama-icon"
          v-if="info.ifPanorama===1 && activBtn==='vr'"
          @click.stop="panoramaClickHandler"
        >
          <img src="../../assets/img/market/view720.png" alt />
        </div>
        <div class="action-btn">
          <div
            class="vr"
            :class="{'active': activBtn==='vr'}"
            v-if="info.ifPanorama===1"
            @click.stop="activBtn='vr'"
          >VR</div>
          <div class="photo" :class="{'active': activBtn==='图片'}" @click.stop="activBtn='图片'">图片</div>
          <div
            class="video"
            :class="{'active': activBtn==='视频'}"
            @click.stop="videoHandle"
            v-if="info.fyVideo"
          >视频</div>
        </div>
        <div class="video-box" v-show="showVideo">
          <video
            width="100%"
            height="100%"
            ref="videoplay"
            preload="true"
            controls="showControls"
            style="object-fit:fill"
            :poster="info.headImgUrl"
            webkit-playsinline="true"
            playsinline="true"
            x-webkit-airplay="allow"
            x5-video-player-type="h5"
            x5-video-player-fullscreen="true"
          >
            <source :src="info.fyVideo" type="video/mp4" />
          </video>
          <div class="close-video" @click="videoHide">退出视频</div>
        </div>
        <div class="views">当前已有{{info.browsCount || 0}}人关注过此楼盘</div>
      </div>
      <!-- 视频直播录播 -->
      <div class="live-play" @click="goLive" v-if="info.videoLiveVo">
        <div class="live-status">
          <span>●</span>
          {{info.videoLiveVo.liveType | formatLiveType}}
        </div>
        <div class="live-title">{{info.videoLiveVo.liveTitle}}</div>
        <div class="live-more">
          <img src="../../assets/img/marketDetail/arrow2@2x.png" />
        </div>
      </div>
      <!-- 楼盘基本信息 -->
      <div class="market-base-info">
        <div class="title-box">
          <div class="title">{{info.linkerName}}</div>
          <div class="views" @click="goCalculation">
            <!-- <img src="../../assets/img/market/classify/calculation.png" alt=""> -->

            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icon-loupan_jisuanji" />
            </svg>
          </div>
        </div>
        <div class="tags">
          <span
            v-for="(item,index) in tagGroupArr.slice(0,3)"
            :class="{'active': item === '热销中', 'red': item === '即将发售'}"
          >{{item | formatMarketTag}}</span>
        </div>
        <div class="money" v-if="info.divisionRules">
          <img src="../../assets/img/market/classify/money.png" alt />
          {{info.divisionRules}}
        </div>
        <div class="base-box">
          <div class="base-item">
            <span class="text">价格：</span>
            {{info.averagePrice}}
          </div>
          <div class="base-item">
            <span class="text">区域：</span>
            {{info.city}} {{info.county}}
          </div>
          <div class="base-item">
            <span class="text">用途：</span>
            {{info.houseUse | formatHouseUse}}
          </div>
          <div class="base-item">
            <span class="text">开盘：</span>
            {{info.openTime}}
          </div>
          <div class="base-item">
            <span class="text">年限：</span>
            {{info.propertyYears || '暂无信息'}}
          </div>
          <div class="base-item">
            <span class="text">建面：</span>
            {{info.area}}
          </div>
        </div>
        <div class="address" @click="mapClickHandler">
          <span class="text">地址：</span>
          <p>{{info.detailAddress}}</p>
          <div class="icon">
            <img src="../../assets/img/marketDetail/arrow2@2x.png" />
          </div>
        </div>
        <div class="other" @click="moreInfoHandler">
          <span class="text">其他：</span>
          <p>产权年限、装修标准、开发商、物业、车位…</p>
          <div class="icon">
            <img src="../../assets/img/marketDetail/arrow2@2x.png" />
          </div>
        </div>
      </div>
      <!-- tab切换 -->
      <div class="tab-box">
        <van-tabs v-model="tabActive" :line-width="20" :line-height="4" color="#007AE6">
          <van-tab title="资料">
            <!-- 户型图 -->
            <div
              class="house-type scale-1px"
              v-if="info.houseTypeList&&info.houseTypeList.length>0"
            >
              <div class="title-box">
                <div class="title">房源户型</div>
                <div class="more" @click="goFamily">
                  全部户型
                  <img src="../../assets/img/marketDetail/arrow2@2x.png" />
                </div>
              </div>
              <div class="type-swipe-content">
                <swiper :options="swiperOption">
                  <swiper-slide v-for="(item,index) in info.houseTypeList" :key="index">
                    <div class="house-type-item">
                      <div class="house-type-img" @click.stop="houseTypeHandle(item.imgUrl)">
                        <img :src="item.imgUrl" alt />
                      </div>
                      <div class="house-type-info">
                        <p class="house-type-name">{{item.householdDesc}}</p>
                        <p
                          class="house-type-area"
                          v-if="item.orientations=='暂无信息'"
                        >{{`建面${item.area} 暂无朝向信息`}}</p>
                        <p
                          class="house-type-area"
                          v-else
                        >{{`建面${item.area} ${item.orientations}朝向`}}</p>
                      </div>
                    </div>
                  </swiper-slide>
                </swiper>
              </div>
            </div>
            <!-- 楼盘动态 -->
            <div
              class="house-news scale-1px"
              v-if="info.houseDynamicList&&info.houseDynamicList.length>0"
            >
              <div class="title-box">
                <div class="title">楼盘动态</div>
                <div class="more" @click="goNews">
                  查看全部
                  <img src="../../assets/img/marketDetail/arrow2@2x.png" />
                </div>
              </div>
              <div
                class="news-container"
                v-for="(item,index) in info.houseDynamicList.slice(0,2)"
                :key="index"
                :class="{'scale-1px-bottom': info.houseDynamicList.length > 1 && index !=1}"
              >
                <p class="news-title">{{item.title}}</p>
                <p class="news-content">{{item.content | textOver(48)}}</p>
                <p class="news-time">{{item.dynamicTime}}</p>
              </div>
            </div>
            <!-- 周边位置 -->
            <div
              class="house-circum scale-1px"
              v-if="info.houseAroundType&&info.houseAroundType.length>0"
            >
              <div class="title-box">
                <div class="title">周边位置</div>
              </div>
              <div class="tab-box">
                <van-tabs
                  v-model="mapTab"
                  color="#007ae6"
                  title-active-color="#007ae6"
                  :line-height="0"
                  swipeable
                >
                  <van-tab
                    v-for="item in info.houseAroundType"
                    :key="item.name"
                    :title="item.name"
                    :line-width="0"
                  />
                </van-tabs>
              </div>
              <div class="map-box" @click="mapClickHandler">
                <t-map
                  :latLng="{lat:info.latitude,lng:info.longitude}"
                  :data="mapData"
                  :conf="mapConf"
                ></t-map>
              </div>
              <div class="tips">
                <img src="../../assets/img/market/tips.png" alt srcset />数据统计范围为楼盘2公里以内，数据来至于腾讯地图，仅供参考！
              </div>
            </div>
            <!-- 其他楼盘 -->
            <div class="house-recommend scale-1px" v-if="info.linkerOtherList.length>0">
              <div class="title-box">
                <div class="title">其他楼盘</div>
                <div class="more" @click="goMarket">
                  查看全部
                  <img src="../../assets/img/marketDetail/arrow2@2x.png" />
                </div>
              </div>
              <div class="recommend-swipe-content">
                <div
                  class="recommend-house-item"
                  v-for="(item,index) in info.linkerOtherList.slice(0,3)"
                  :key="index"
                  @click="itemClickHandler(item.linkerId)"
                >
                  <div class="market-img">
                    <img class="headimg" :src="item.headImgUrl || palceholderImg" alt />
                    <img
                      v-if="item.ifPanorama==1"
                      class="icon"
                      src="../../assets/img/market/view720.png"
                      alt
                    />
                    <!-- <div v-show="item.cpActivityVo" class="coupon">卡券</div> -->
                  </div>
                  <div class="market-info">
                    <p class="market-name">{{item.linkerName}}</p>
                    <p class="market-location">{{item.district}}</p>
                    <p class="market-tags">
                      <span
                        v-show="item.saleStatus"
                        :class="{'active': item.saleStatus == 0, 'red': item.saleStatus == 1}"
                      >{{['在售', '待售', '', '售罄'][item.saleStatus] || '在售'}}</span>
                      <span v-for="(option,i) in item.linkerTags.slice(0,2)" :key="i">{{option}}</span>
                    </p>
                    <p class="market-price">{{item.averagePrice}}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="m-statement scale-1px">
              <!-- 免责声明 -->
              <span>免责声明：楼盘信息来源于政府公示网站、开发商、第三方公众平台，最终以政府部门登记备案为准，请谨慎核查。如楼盘信息有误或其他异议，请点击</span>
              <router-link :to="'/marketDetail/correction/'+id" class="feedback">反馈纠错</router-link>
            </div>
          </van-tab>
          <van-tab title="评论">
            <!-- 楼盘评价 -->
            <div class="evaluate-box scale-1px" v-if="commnetList && commnetList.length">
              <div class="title-box">
                <div class="title">楼盘评论({{commentCount.all}})</div>
                <div class="more" @click="goCommentList">
                  查看全部
                  <img src="../../assets/img/marketDetail/arrow2@2x.png" />
                </div>
              </div>
              <div class="evaluate-content">
                <div v-if="commentCount">
                  <p
                    class="evaluate-label"
                    @click="goUrl(`/market/comment/list/${info.linkerId}?type=3`)"
                    v-if="commentCount.withPicture"
                  >有图 ({{commentCount.withPicture}})</p>
                  <p
                    class="evaluate-label"
                    @click="goUrl(`/market/comment/list/${info.linkerId}?type=1`)"
                    v-if="commentCount.authUserNum"
                  >实看 ({{commentCount.authUserNum}})</p>
                  <p
                    class="evaluate-label"
                    @click="goUrl(`/market/comment/list/${info.linkerId}?type=2`)"
                    v-if="commentCount.goodReputation"
                  >好评 ({{commentCount.goodReputation}})</p>
                </div>
                <ul class="evaluate-detail" @click="goCommentList">
                  <li class="van-hairline--bottom" v-for="(item,index) in commnetList">
                    <div class="top">
                      <img :src="item.avatarUrl" alt srcset />
                      <div class="message">
                        <p>
                          {{item.nickName | privacyName() }}
                          <span
                            v-if="item.userTag===1"
                          >{{item.userTag | formatTag}}</span>
                        </p>
                        <p>
                          <van-rate
                            v-model="item.starLevel"
                            :size="10"
                            :count="5"
                            :readonly="true"
                            color="#ED8147"
                          />
                        </p>
                      </div>
                    </div>
                    <div class="bottom">
                      {{item.content}}
                      <span v-if="item.imgList.length">
                        <img src="../../assets/img/market/comment/pic.png" alt />
                      </span>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="go-btn" @click="goCommentWrite">
                <i class="iconfont icon-loupan_pinglun"></i>去点评
              </div>
            </div>
            <!-- 买房问问 -->
            <div class="buy-ask scale-1px" v-if="linkerInfo">
              <div class="title-box">
                <div class="title">买房问问({{questionNum}})</div>
                <div class="more" @click="goQuestionList">
                  查看全部
                  <img src="../../assets/img/marketDetail/arrow2@2x.png" />
                </div>
              </div>
              <div>
                <ol class="ask-content" @click="goQuestionList">
                  <li>
                    <div>
                      <span>问</span>
                      <span>{{this.linkerInfo&&this.linkerInfo.content}}</span>
                    </div>
                    <p>{{this.linkerInfo&&this.linkerInfo.replyNum}}人回复</p>
                  </li>
                  <li
                    class="van-hairline--bottom"
                    v-if="this.linkerInfo&&this.linkerInfo.replyVO!=''"
                  >
                    <div>
                      <span>答</span>
                      <img class="header-img" :src="this.linkerInfo.replyVO.avatarUrl " alt srcset />
                      <i
                        v-if="this.linkerInfo.replyVO.userId!='-1'"
                      >{{this.linkerInfo.replyVO.nickName | privacyName()}}</i>
                      <i v-else>{{this.linkerInfo.replyVO.nickName}}</i>
                      <a class="admin-label" v-if="this.linkerInfo.replyVO.userId==='-1'">系统客服</a>
                      <i>{{this.linkerInfo.replyVO.createTimeStamp | dateTimeFormatter(5)}}</i>
                    </div>
                    <p>{{this.linkerInfo.replyVO.content}}</p>
                  </li>
                </ol>
                <div class="go-btn" @click="commitQuestion">
                  <i class="iconfont icon-loupan_huifu"></i>去提问
                </div>
              </div>
            </div>
            <!-- 无评价数据 -->
            <div class="no-ask-data scale-1px" v-if="!commnetList.length || !linkerInfo">
              <img src="../../assets/img/market/classify/noask.png" alt />
              <p class="tips">还没人对该楼盘进行评论或问答</p>
              <div class="action-btn">
                <div class="item" v-show="!commnetList.length" @click="goCommentWrite">去点评</div>
                <div class="item" v-show="!linkerInfo" @click="commitQuestion">去问答</div>
              </div>
            </div>
          </van-tab>
          <van-tab title="素材库">
            <div
              class="source-box scale-1px"
              v-if="posterList.records.length || newsList.records.length || videoList.records.length"
            >
              <!-- 海报 -->
              <div class="poster-box scale-1px-bottom" v-if="posterList.records.length">
                <div class="title-box">
                  <div class="title">海报({{posterList.total}})</div>
                  <div class="more" @click="goSource(0)">
                    全部海报
                    <img src="../../assets/img/marketDetail/arrow2@2x.png" />
                  </div>
                </div>
                <div class="poster-list">
                  <div
                    class="item"
                    v-for="(item,index) in posterList.records"
                    :key="index"
                    @click="goPoster(item,index)"
                  >
                    <div class="pic">
                      <img :src="item.content" alt srcset />
                    </div>
                    <div class="title">{{item.title}}</div>
                    <div class="time">{{item.updateTime}}</div>
                  </div>
                </div>
              </div>
              <!-- 资讯 -->
              <div class="news-box" v-if="newsList.records.length">
                <div class="title-box">
                  <div class="title">资讯({{newsList.total}})</div>
                  <div class="more" @click="goSource(1)">
                    查看全部
                    <img src="../../assets/img/marketDetail/arrow2@2x.png" />
                  </div>
                </div>
                <div class="news-list">
                  <div
                    class="item scale-1px-bottom"
                    v-for="(item,index) in newsList.records"
                    :key="index"
                    @click="goArticle(item)"
                  >
                    <div class="left-box">
                      <div class="title">{{item.title}}</div>
                      <div class="info">
                        <span class="create">{{item.createBy}}</span>
                        <span>{{item.updateTime}}</span>
                      </div>
                    </div>
                    <div class="pic">
                      <img :src="item.coverImgUrl" alt srcset />
                    </div>
                  </div>
                </div>
              </div>
              <!-- 视频 -->
              <div class="video-box" v-if="videoList.records.length">
                <div class="title-box">
                  <div class="title">视频({{videoList.total}})</div>
                  <div class="more" @click="goSource(2)">
                    查看全部
                    <img src="../../assets/img/marketDetail/arrow2@2x.png" />
                  </div>
                </div>
                <div class="video-list">
                  <div
                    class="item"
                    v-for="(item,index) in videoList.records"
                    :key="index"
                    @click="goVideo(item)"
                  >
                    <div class="pic" :style="{'backgroundImage':'url('+item.coverImgUrl+')'}">
                      <div class="play-icon">
                        <img src="../../assets/img/source/play.png" alt />
                      </div>
                    </div>
                    <div class="title">{{item.title}}</div>
                    <div class="time">{{item.updateTime}}</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 没有素材 -->
            <div class="no-source-data scale-1px" v-else>
              <img src="../../assets/img/market/classify/noask.png" alt />
              <p class="tips">该楼盘暂无宣传物料</p>
            </div>
          </van-tab>
          <van-tab title="培训">
            <div class="learn-box scale-1px" v-if="JSON.stringify(learnList) !=='{}'">
              <div class="item-box" v-for="(item,type,index) in learnList" :key="type">
                <div class="title-box">
                  <div class="title">{{type | formatType}}</div>
                  <div class="more" v-if="index===0" @click="goLearn">
                    查看全部
                    <img src="../../assets/img/marketDetail/arrow2@2x.png" />
                  </div>
                </div>
                <div :class="{'video': item[0].format===2, 'one': item.length === 1}">
                  <div class="item-info" v-for="(option,i) in item" :key="i">
                    <div
                      class="item-other"
                      v-if="option.format !== 4"
                      :style="{'backgroundImage':'url('+option.coverImgUrl+')'}"
                      @click="toLearnDeails(option, option.format, i)"
                    >
                      <div class="pdf" v-if="option.format===3">PDF</div>
                      <div class="play-icon" v-if="option.format===2">
                        <img src="../../assets/img/source/play.png" alt />
                      </div>
                      <div class="info">
                        <div class="title">{{option.title}}</div>
                        <div class="time">{{option.updateTime.split(' ')[0]}}</div>
                      </div>
                      <video
                        :src="JSON.parse(option.content).url"
                        ref="videos"
                        style="height:0; width: 0; opacity: 0; position:absolute;"
                        controls="controls"
                        v-if="option.format===2"
                      ></video>
                    </div>
                    <div
                      class="item-h5 scale-1px-bottom"
                      v-else
                      @click="toLearnDeails(option, option.format, i)"
                    >
                      <div class="cnt scale-1px">
                        <div class="info">
                          <div class="title">{{option.title}}</div>
                          <div class="time">{{option.updateTime.split(' ')[0]}}</div>
                        </div>
                        <div class="pic">
                          <img :src="option.coverImgUrl" alt />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="empty-learn scale-1px" v-else>
              <img src="../../assets/img/market/classify/noask.png" alt />
              <p>该楼盘尚未上传培训素材</p>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="bottom-action" v-if="info && !showPreview">
      <div class="free-btn" v-if="info.openStatus== 0" v-show="!panAgent" @click="openMarket">
        <span v-show="+info.isFree">免费</span>开通
      </div>
      <!-- <div class="expire" v-else-if="info.openStatus== 1" @click="openMarket">楼盘已过期</div> -->

      <div v-else-if="info.openStatus== 1">
        <div class="tips-box" v-show="info.expireDate ">
          <span>此楼盘已于{{info.expireDate | formatExpireTime}}过期</span>
        </div>
        <div
          class="free-btn"
          v-if="+info.isFree && info.linkerType != 1"
          v-show="!panAgent"
          @click="openMarket"
        >切换渠道</div>
        <div class="free-btn" v-else @click="openMarket" v-show="!panAgent">开通</div>
      </div>
      <div class="share-btn" v-else>
        <!-- 三天后到期 -->
        <div
          class="tips-box"
          v-show="info.linkerType != 1 && info.expireDate - (+new Date()) < 259200000 && info.expireDate - (+new Date()) > 0"
        >
          <span>此楼盘将于{{info.expireDate | formatExpireTime}}过期</span>
        </div>
        <div
          class="free-btn"
          v-if="+info.isFree && !info.channelId && info.linkerType != 1 && !panAgent && !info.presetLinker"
          @click="openMarket"
        >切换渠道</div>
        <div
          class="btn-box"
          v-else-if="+info.isFree && !info.channelId && info.linkerType != 1 && panAgent && !info.presetLinker"
        >
          <div class="share" @click="shareHandler">
            <i class="iconfont icon-loupan_fenxiang"></i>
            <p>分享</p>
          </div>
        </div>
        <div class="btn-box" v-else>
          <div
            class="stick"
            @click="stickHander"
            :class="{'active': info.isRecommand ==10}"
            v-show="!panAgent"
          >
            <i class="iconfont icon-loupan_zhiding"></i>
            <p>置顶</p>
          </div>
          <div
            class="show"
            @click="displayHander"
            :class="{'active': info.displayFlag ==0}"
            v-show="!panAgent"
          >
            <i class="iconfont icon-loupan_zhanshi"></i>
            <p>展示</p>
          </div>
          <div class="share" @click="shareHandler">
            <i class="iconfont icon-loupan_fenxiang"></i>
            <p>分享</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 楼盘特制活动 -->
    <div
      class="poster-container"
      ref="posterContainer"
      v-if="posterShow && !activityInfo"
      @click="hidePosterShow"
    >
      <div class="cnt">
        <div class="bg_img poster-img" @click.stop>
          <img :src="info.activityImgUrl" alt srcset />
          <div class="bg_img close-icon" @click.stop="hidePosterShow">
            <img src="../../assets/img/market/closeIcon@2x.png" alt />
          </div>
        </div>
      </div>
    </div>
    <!-- 图片预览 -->
    <div class="img-preview" v-if="showPreview" @click="hidePreview">
      <div class="title">{{imgData.householdDesc}}</div>
      <div class="img-box">
        <van-swipe
          @change="onChange"
          :initial-swipe="current"
          :loop="false"
          :show-indicators="false"
        >
          <van-swipe-item v-for="(item,index) in previewList" :key="index">
            <img :src="item" alt srcset />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="custom-indicator">{{ current + 1 }}/{{previewList.length}}</div>
    </div>
    <!-- 抽奖活动 -->
    <transition name="fade" v-if="activityInfo && info && info.openStatus==='2'">
      <div class="signin" @click="goDuiBaActivity">
        <img :src="activityInfo.entranceImg || activityIcon" alt srcset />
      </div>
    </transition>
    <div
      class="activity-model"
      v-show="activityInfo && !activityInfo.posterType && info.openStatus==='2' && activityInfo.supernatantImg"
    >
      <div class="pic-box" v-if="activityInfo" @click="activityInfo.posterType = true">
        <div class="pic" @click.stop="goDuiBaActivity">
          <img :src="activityInfo.supernatantImg" alt srcset />
        </div>
        <div class="close" @click="activityInfo.posterType = true">
          <img src="../../assets/img/market/close.png" alt />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { mapGetters } from 'vuex'
import HintTire from 'COMP/Market/MarketDetail/HintTire/'
import MarketRenew from 'COMP/Market/MarketDetail/MarketRenew'
import TitleBar from 'COMP/TitleBar'
import TMap from 'COMP/TMap'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import marketService from 'SERVICE/marketService'
import integralService from 'SERVICE/integralService'
import { getProvince } from '@/utils/fullArea'
import sourceService from 'SERVICE/sourceService'
import userService from '@/services/userService'
import commonService from '@/services/commonService'
export default {
  components: {
    HintTire,
    MarketRenew,
    TitleBar,
    TMap,
    swiper,
    swiperSlide
  },
  data() {
    return {
      id: '',
      info: null,
      openchannel: '',
      showPreview: false,
      swipeCurrent: 0,
      activBtn: 'vr',
      showVideo: false,
      photoStatus: false,
      tagGroupArr: [],
      mapTab: 0,
      mapConf: {
        draggable: false,
        scrollwheel: false,
        disableDoubleClickZoom: false
      },
      tabActive: 0,
      swiperOption: {
        slidesPerView: 2,
        spaceBetween: 12
      },
      current: 0,
      showPreview: false,
      previewList: [],
      imgData: {},
      scrollTop: 0,
      palceholderImg: require('IMG/dynamics/palceholder-img.png'),
      linkerInfo: null,
      commnetList: [],
      commentCount: null,
      posterList: {
        records: []
      },
      newsList: {
        records: []
      },
      videoList: {
        records: []
      },
      learnList: '',
      activityInfo: '',
      activityUrl: '',
      activityStatus: false,
      posterShow: false,
      photoId: '',
      panAgent: sessionStorage.getItem('panAgent') === 'true',
      oldUser: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'userArea']),
    mapData() {
      return this.info.houseAroundType[this.mapTab]
    }
  },
  created() {
    this.openchannel = this.$route.query.openchannel || ''
    this.id = this.$route.params.id
    this.photoId = this.$route.query.photoId || ''
    this.getDetailInfo()
    this.getMarketDetailPhotoInfo()
    this.getCommentCount()
    this.getCommentList()
    this.getQuestionDetail(this.id)
    this.getStudyList()
    this.oldUser = !(sessionStorage.getItem('newUserPreset') === 'true' || this.panAgent) // 不是泛经纪人 也不是 新用户
  },
  watch: {
    $route(to, from) {
      this.openchannel = this.$route.query.openchannel || ''
      this.id = this.$route.params.id
      this.photoId = this.$route.query.photoId || ''
      this.getDetailInfo()
      this.getMarketDetailPhotoInfo()
      this.getCommentCount()
      this.getCommentList()
      this.getQuestionDetail(this.id)
      this.getStudyList()
    }
  },
  methods: {
    // 楼盘详情
    getDetailInfo() {
      marketService
        .getLinkerDetail(this.id)
        .then(res => {
          this.info = res
          this.activBtn = res.ifPanorama ? 'vr' : '图片'
          if (this.activBtn === '视频') {
            this.showVideo = true
          }
          this.tagGroupArr = [this.info.saleStatus, ...this.info.houseUseList]
          // 从楼盘相册返回
          // if (this.photoId) {
          //   for (let index = 0; index < res.bannerList.length; index++) {
          //     const el = res.bannerList[index]
          //     if (el.id === this.photoId) {
          //       this.swipeCurrent = index
          //       break
          //     }
          //   }
          // }
          // 从系统消息跳转过来直接选择渠道
          if (this.openchannel && !this.info.channelId) {
            // 跳转绑定渠道
            this.$router.push(`/market/change/channel?linkerId=${this.id}&openStatus=${this.info.openStatus}`)
          }
          // 查询是否有活动
          if (this.info.openStatus === '2') {
            this.getActivityInfo()
          }
          // 是否取消渠道
          this.getChannelName()
          // 浏览数据上报
          this.viewMarketReport()
          // 滚动到之前的位置
          let tabScrollTop = window.sessionStorage.getItem('tabScrollTop')
          // 楼盘特别海报
          this.posterShow = !!this.info.activityImgUrl
          // 楼盘特别海报每次进入企业微信只展示一次海报
          if (window.sessionStorage.getItem(this.id)) {
            this.posterShow = false
          }
          // 滚动到跳转前的位置
          if (tabScrollTop) {
            this.$nextTick(() => {
              document.querySelector('.market-detail-page').scrollTop = tabScrollTop
              window.sessionStorage.removeItem('tabScrollTop')
            })
          }
        })
        .catch(err => {
          this.info = {}
        })
    },
    // 获取活动
    getActivityInfo() {
      integralService
        .getActivityInfo({
          linkerId: this.id
        })
        .then(res => {
          this.activityInfo = res
          this.getActivityUrl()
        })
        .catch(err => {})
    },
    // 隐藏楼盘特别活动
    hidePosterShow() {
      this.$refs.posterContainer.style.opacity = 0
      this.posterShow = false
      window.sessionStorage.setItem(this.id, false)
    },
    // 获取活动地址
    getActivityUrl() {
      integralService
        .autoLogin({
          redirect: this.activityInfo.activityUrl,
          linkerId: this.id,
          activityId: this.activityInfo.activityId
        })
        .then(res => {
          this.activityUrl = res
        })
        .catch(err => {})
    },
    // 跳转兑吧活动
    goDuiBaActivity() {
      if (this.activityStatus) {
        return this.$toast('你点的太快了！')
      }
      this.activityStatus = true
      // 上报访问记录
      integralService
        .insertAccessRecords({
          activityId: this.activityInfo.activityId,
          linkerId: this.id
        })
        .then(res => {
          this.activityStatus = false
          // 判断活动
          this.activityInfo.posterType = true
          if (this.activityInfo.activityType === 0) {
            return this.$toast({
              duration: 2000,
              message: `活动将在${this.activityInfo.activityStart}开始，敬请期待~`
            })
          }
          if (this.activityInfo.activityType === 2) {
            return this.$toast({
              duration: 2000,
              message: `活动已结束~`
            })
          }
          let province = getProvince(this.userArea.city)
          let range = this.activityInfo.activityRangeList
          if (!range.includes(province) && range.length) {
            return this.$toast({
              duration: 2000,
              message: `抱歉，您所在区域无法参加活动~`
            })
          }
          window.location.href = this.activityUrl
        })
        .catch(err => {
          this.activityStatus = false
          window.location.href = this.activityUrl
        })
    },
    // 浏览楼盘详情页数据上报
    viewMarketReport() {
      commonService.dataReport({
        code: 'LPLL',
        num: 1,
        agentId: this.userInfo.agentId,
        userActionType: 'LPLL',
        houseId: this.id,
        houseName: this.info.linkerName,
        majorRegion: this.userInfo.majorRegion,
        location: this.userArea.city
      })
    },
    //判断该楼盘有无图片列表
    getMarketDetailPhotoInfo() {
      marketService
        .getMarketDetailPhoto(this.id)
        .then(res => {
          this.photoStatus = res.length > 0
        })
        .catch(err => {
          this.photoStatus = false
        })
    },
    // 顶部图片滑动
    swipeChange(val) {
      this.swipeCurrent = val
    },
    // 进入全景
    panoramaClickHandler() {
      window.location.href = `${this.info.linkerUrl}?enterpriseId=${this.userInfo.enterpriseId}`
    },
    // 进入视频
    videoHandle() {
      this.activBtn = '视频'
      // this.$refs.videoplay.play()
      this.$refs.videoplay.muted = true
      this.showVideo = true
    },
    // 关闭视频
    videoHide() {
      this.$refs.videoplay.pause()
      this.showVideo = false
      this.activBtn = '图片'
    },
    // 进入相册
    photoHandle(photoId) {
      if (this.showVideo) {
        return this.videoHide()
      }
      if (this.activBtn === 'vr') {
        return false
      }
      this.activBtn = '图片'
      //进入相册页面
      if (this.photoStatus) {
        this.$router.push({
          name: 'photoList',
          query: {
            id: this.id,
            photoId: photoId
          }
        })
      } else {
        this.$toast({
          duration: 1000,
          message: '该楼盘暂无图片'
        })
      }
    },
    // 进入直播
    goLive() {
      this.$router.push({
        path: '/market/live/player',
        query: {
          linkerId: this.id,
          liveId: this.info.videoLiveVo.liveId,
          liveType: this.info.videoLiveVo.liveType
        }
      })
    },
    // 地图点击
    mapClickHandler() {
      this.$router.push({
        path: '/public/map-Search',
        query: {
          id: this.info.linkerId,
          mapTab: this.mapData.category,
          latitude: this.info.latitude,
          longitude: this.info.longitude
        }
      })
    },
    // 点击其他
    moreInfoHandler() {
      this.$router.push({
        name: 'marketDetail-info',
        params: {
          id: this.info.linkerId,
          licenceList: this.info.licenceList
        }
      })
    },
    //查看户型图片预览
    houseTypeHandle(n) {
      this.scrollTop = document.querySelector('.market-detail-page').scrollTop
      let data = []
      this.info.houseTypeList.forEach(ele => {
        data.push(...ele.imgUrlList)
      })
      this.current = data.indexOf(n)
      this.previewList = data
      this.imgData = this.info.houseTypeList[this.current]
      this.showPreview = true
    },
    // 预览图片切换
    onChange(index) {
      this.current = index
      this.imgData = this.info.houseTypeList[index]
    },
    // 隐藏预览
    hidePreview() {
      this.showPreview = false
      this.$nextTick(() => {
        document.querySelector('.market-detail-page').scrollTop = this.scrollTop
      })
    },
    // 跳转户型图列表
    goFamily() {
      this.$router.push(`/marketDetail/FamilyList/${this.id}`)
    },
    // 跳转楼盘动态
    goNews() {
      this.$router.push(`/marketDetail/marketAllDynamic/${this.id}`)
    },
    // 跳转楼盘列表
    goMarket() {
      this.$router.push(`/market`)
    },
    // 其他楼盘
    itemClickHandler(id) {
      this.$router.push(`/market/${id}`)
      this.$nextTick(() => {
        document.querySelector('.market-detail-page').scrollTop = 0
      })
    },
    // 进入楼盘评价页面
    goCommentWrite() {
      this.$router.push(`/market/comment/write/${this.info.linkerId}`)
    },
    // 进入楼盘问问
    commitQuestion() {
      this.$router.push({
        name: 'market-asking-ask',
        params: {
          id: this.id
        },
        query: {
          linkerName: this.info.linkerName
        }
      })
    },
    // 楼盘评论分类统计
    getCommentCount() {
      marketService
        .getCommentCount({
          linkerId: this.id
        })
        .then(res => {
          if (res) {
            this.commentCount = res
          }
        })
        .catch(err => {})
    },
    // 获取评论列表
    getCommentList() {
      marketService
        .getCommentList({
          current: 1,
          size: 2,
          linkerId: this.id,
          type: 0
        })
        .then(res => {
          if (res.records && res.records.length) {
            this.commnetList = res.records
          }
        })
        .catch(err => {})
    },
    // 跳转全部评论列表
    goCommentList() {
      this.$router.push(`/market/comment/list/${this.id}?type=0`)
    },
    // 获取买房问问的详情
    getQuestionDetail(linkerId) {
      marketService
        .getBuildQuestionDetail(linkerId)
        .then(res => {
          this.linkerInfo = res.linkerQuestionVO
          if (this.linkerInfo.replyNum == 0 || this.linkerInfo.replyNum == '') {
            this.linkerInfo.replyNum = 0
          }
          this.questionNum = res.questionNum
          this.replyNum = res.replyNum
        })
        .catch(err => {})
    },
    // 跳转买房问问列表
    goQuestionList() {
      var parameterInfo = {
        id: this.id,
        replyNum: this.replyNum,
        questionNum: this.questionNum,
        linkerName: this.info.linkerName
      }
      this.$router.push({
        name: 'market-asking-list',
        query: {
          infos: JSON.stringify(parameterInfo)
        }
      })
    },
    // 跳转评论tab
    goUrl(url) {
      this.$router.push(url)
    },
    // 获取0海报\1图文\2视频
    getSource(type) {
      sourceService
        .getAppliedMaterialList({
          linkerId: this.id,
          type: type,
          current: 1,
          size: 2
        })
        .then(res => {
          if (type === 0) {
            this.newsList = res
          } else if (type === 2) {
            this.posterList = res
          } else {
            this.videoList = res
          }
        })
        .catch(err => {})
    },
    // 跳转素材列表
    goSource(tab) {
      window.sessionStorage.setItem('activeTab', tab)
      this.$router.push(`/source?linkerId=${this.info.linkerId}`)
    },
    // 跳转海报详情 0-图文 1-视频 2-海报
    goPoster(item, index) {
      this.$router.push({
        path: '/source/poster',
        query: {
          linkerId: this.id,
          current: index
        }
      })
    },
    // 跳转图文详情
    goArticle(item) {
      this.$router.push({
        path: '/source/article',
        name: 'source-article',
        params: {
          content: item
        }
      })
    },
    // 跳转视频详情
    goVideo(item) {
      this.$router.push({
        path: '/source/video',
        name: 'source-video',
        params: {
          content: item
        }
      })
    },
    // 获取培训素材
    getStudyList() {
      userService
        .getStudyListByLinkerId({
          linkerId: this.id
        })
        .then(res => {
          let data = {}
          res.forEach(el => {
            if (data[el.type]) {
              data[el.type].push(el)
            } else {
              data[el.type] = [el]
            }
          })
          this.learnList = data
        })
        .catch(err => {})
    },
    //跳转到详情
    toLearnDeails(learn, type, index) {
      this.title = learn.title
      let sta = {
        1: 'img',
        2: 'video',
        3: 'pdf',
        4: 'h5'
      }
      if (type === 2) {
        this.playVideo(learn, index, 'videos')
      } else {
        this.$router.push(`/user/learn/thirdPage/${sta[type]}?id=${learn.id}&linkerId=${learn.linkerId}`)
      }
    },
    // 播放时自动全屏
    playVideo(learn, index, ref) {
      let element = this.$refs[ref]
      if (element instanceof Array) {
        element = element[index]
      }
      this.requestFullscreen(element)
      element.play()
      if (learn.firstPlay) return
      learn.firstPlay = true
    },
    // 全屏兼容代码
    requestFullscreen(ele) {
      if (ele.requestFullscreen) {
        ele.requestFullscreen()
      } else if (ele.webkitRequestFullscreen) {
        ele.webkitRequestFullscreen()
      } else if (ele.mozRequestFullScreen) {
        ele.mozRequestFullScreen()
      } else if (ele.msRequestFullscreen) {
        ele.msRequestFullscreen()
      }
    },
    // 去培训
    goLearn() {
      this.$router.push({
        path: '/user/learn/index',
        query: {
          linkerId: this.info.linkerId
        }
      })
    },
    //进入计算器页面
    goCalculation() {
      // window.location.href = process.env.VUE_APP_AW_SIT_CALCU + 'panorama-helper/linker/toNewcalculator?linkerName=' + encodeURI(this.info.linkerName)
      window.location.href = process.env.VUE_APP_AW_SIT_CALCU + 'mobile/calculator.html'
    },
    // 楼盘分享
    shareHandler() {
      if (this.info.openStatus !== '2') {
        return this.$toast('楼盘已过期，无法分享')
      }
      if (this.info.openStatus == 2 && +this.info.isFree && !this.info.channelId && this.info.isAgent && this.info.linkerType != 1 && this.oldUser && !this.info.presetLinker) {
        this.$dialog
          .confirm({
            title: '温馨提示',
            message: `您还没有绑定渠道，请先绑定渠道。`,
            confirmButtonText: '选择渠道'
          })
          .then(() => {
            // 跳转切换渠道页面
            this.$router.push(`/market/change/channel?linkerId=${this.id}&openStatus=${this.info.openStatus}`)
          })
          .catch(() => {})
      } else {
        this.shareMarketReport() // 数据上报
        this.$router.push({
          name: 'market-poster',
          params: {
            id: this.id
          }
        })
      }
    },
    // 点击楼盘分享数据上报
    shareMarketReport() {
      commonService.dataReport({
        code: 'DJFXLP',
        num: 1,
        agentId: this.userInfo.agentId,
        userActionType: 'DJFXLP',
        houseId: this.id,
        houseName: this.info.linkerName,
        majorRegion: this.userInfo.majorRegion,
        location: this.userArea.city
      })
    },
    // 置顶
    stickHander() {
      if (this.info.openStatus !== '2') {
        return this.$toast('楼盘已过期，无法置顶')
      }
      if (this.info.openStatus == 2 && +this.info.isFree && !this.info.channelId && this.info.isAgent && this.oldUser && this.info.linkerType != 1 && !this.info.presetLinker) {
        this.$dialog
          .confirm({
            title: '温馨提示',
            message: `您还没有绑定渠道，请先绑定渠道。`,
            confirmButtonText: '选择渠道'
          })
          .then(() => {
            // 跳转切换渠道页面
            this.$router.push(`/market/change/channel?linkerId=${this.id}&openStatus=${this.info.openStatus}`)
          })
          .catch(() => {})
      }
      this.info.isRecommand = +this.info.isRecommand ? 0 : 10
      this.changeHander(this.id, 40, this.info.isRecommand)
    },
    // 展示
    displayHander() {
      if (this.info.openStatus !== '2') {
        return this.$toast('楼盘已过期，无法展示')
      }
      if (this.info.openStatus == 2 && +this.info.isFree && !this.info.channelId && this.info.isAgent && this.oldUser && this.info.linkerType != 1 && !this.info.presetLinker) {
        this.$dialog
          .confirm({
            title: '温馨提示',
            message: `您还没有绑定渠道，请先绑定渠道。`,
            confirmButtonText: '选择渠道'
          })
          .then(() => {
            // 跳转切换渠道页面
            this.$router.push(`/market/change/channel?linkerId=${this.id}&openStatus=${this.info.openStatus}`)
          })
          .catch(() => {})
      }
      this.info.displayFlag = +this.info.displayFlag ? 0 : 1
      this.changeHander(this.id, 30, this.info.displayFlag)
    },
    // 楼盘展示、置顶、取消
    changeHander(linkerId, operationType, status) {
      userService
        .changeMarketData(linkerId, operationType, status)
        .then(res => {
          if (operationType === 30) {
            if (status === 0) {
              this.$toast('已开启展示')
            } else {
              this.$toast('已关闭展示')
            }
          } else {
            if (status === 10) {
              this.$toast('已置顶')
            } else {
              this.$toast('已取消置顶')
            }
          }
        })
        .catch(err => {
          let msg = ''
          if (operationType === 30) {
            msg = status === 0 ? '开启展示失败' : '关闭展示失败'
          } else {
            msg = status === 0 ? '取消置顶失败' : '置顶失败'
          }
          this.$toast(msg)
        })
    },
    // 切换渠道
    changeChannel() {
      this.$router.push(`/market/change/channel?linkerId=${this.id}&openStatus=${this.info.openStatus}`)
    },
    // 开通楼盘
    openMarket() {
      // 已开通未绑定的免费楼盘
      let openStatus = +this.info.isFree && this.info.openStatus === '2' && !this.info.channelId
      // 未开通免费楼盘
      let status = +this.info.isFree && (this.info.openStatus === '0' || this.info.openStatus === '1')
      // 未开通免费楼盘
      if (openStatus || status) {
        marketService
          .getChannelListByLinkerId({ linkerId: this.id })
          .then(res => {
            if (res.length) {
              // 跳转绑定渠道
              this.$router.push(`/market/change/channel?linkerId=${this.id}&openStatus=${this.info.openStatus}`)
            } else {
              this.$toast('该楼盘没有免费渠道，无法开通')
            }
          })
          .catch()
      } else {
        this.$toast('请联系经纪公司开通楼盘~')
      }
    },
    // 获取取消渠道名称
    getChannelName() {
      marketService
        .getChannelName({
          linkerId: this.id
        })
        .then(res => {
          if (this.info.openStatus == 2 && +this.info.isFree && res.isChancel) {
            this.$dialog
              .confirm({
                title: '温馨提示',
                messageAlign: 'left',
                message: `您所绑定的渠道【${res.channelName}】已与该楼盘终止合作，当前已为您自动解绑渠道，若需正常使用楼盘请重新选择渠道。`,
                confirmButtonText: '切换渠道'
              })
              .then(() => {
                // 跳转绑定渠道
                this.$router.push(`/market/change/channel?linkerId=${this.id}&openStatus=${this.info.openStatus}`)
              })
              .catch(() => {})
          }
        })
        .catch(err => {})
    }
  },
  filters: {
    // 格式化直播状态
    formatLiveType(val) {
      let status = {
        1: '直播中',
        2: '录播中'
      }
      return status[val] || '直播中'
    },
    // 格式化用途
    formatHouseUse(val) {
      let sta = {
        0: '普通住宅',
        1: '商住两用',
        2: '商品房',
        3: '建筑综合体',
        4: '商铺',
        5: '写字楼',
        6: '别墅',
        7: '公寓',
        8: '洋房',
        9: '酒店'
      }
      return sta[val] || '普通住宅'
    },
    // 格式化用户标签
    formatTag(val) {
      if (!val) {
        return ''
      }
      let tag = {
        1: '实看用户',
        2: '未实看用户',
        3: '管理员'
      }
      return tag[val]
    },
    // 格式化楼盘标签
    formatMarketTag(val) {
      let tag = val
      if (val === '热销中') {
        tag = '在售'
      }
      if (val === '即将发售') {
        tag = '待售'
      }
      return tag || '在售'
    },
    // 格式化培训素材
    formatType(type) {
      let sta = {
        1: '实时销控',
        2: '佣金结算规则',
        3: '销售培训视频',
        4: '楼盘标准化价值点',
        5: '销售百问',
        6: '目标客户画像',
        7: '区域竞品分析',
        8: '市场政策与对策'
      }
      return sta[type] || '实时销控'
    },
    // 格式化到期时间
    formatExpireTime(data) {
      if (data) {
        let date = new Date(+data)
        let y = date.getFullYear()
        let m = date.getMonth() + 1
        let d = date.getDate()
        return `${y}/${m}/${d}`
      } else {
        return data
      }

      // let t = data.split('/')
      // let y = new Date(data).getFullYear()
      // if (t.length === 2) {
      //   return `${y}/${data}`
      // } else {
      //   return data
      // }
    }
  },
  mounted() {
    let tabActive = window.sessionStorage.getItem('tabActive')
    if (tabActive) {
      this.tabActive = tabActive
      window.sessionStorage.removeItem('tabActive')
    }
    // 获取素材
    for (let index = 0; index < 3; index++) {
      this.getSource(index)
    }
  },
  beforeRouteLeave(to, from, next) {
    if (to.name !== 'market') {
      window.sessionStorage.setItem('tabActive', this.tabActive) // 记录tab位置
      window.sessionStorage.setItem('tabScrollTop', document.querySelector('.market-detail-page').scrollTop)
    }
    if (this.showPreview) {
      this.showPreview = false
      this.$nextTick(() => {
        document.querySelector('.market-detail-page').scrollTop = this.scrollTop
      })
      return next(false)
    } else {
      next()
    }
  }
}
</script>

<style lang="less" scoped>
.market-detail-cnt {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  height: 100%;
  position: relative;

  .market-detail-page {
    flex: 1;
    overflow-y: scroll;

    .top-swipe-container {
      position: relative;
      width: 100%;
      height: 210px;
      .van-swipe {
        position: relative;
        width: 100;
        height: 100%;
        .custom-indicator {
          position: absolute;
          color: #fff;
          background: rgba(0, 0, 0, 0.6);
          border-radius: 12px;
          z-index: 5;
          right: 16px;
          bottom: 16px;
          font-size: 12px;
          height: 23px;
          line-height: 23px;
          padding: 0 10px;
          border: none;
          opacity: 0.8;
        }

        .swipe-item {
          width: 100%;
          height: 100%;
          background-color: #999999;
          border: none;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          background-clip: content-box;
        }
      }

      .panorama-icon {
        position: absolute;
        width: 100%;
        height: 210px;
        top:0;
        left:0;
        img{
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 64px;
          height: 64px;
        }
        
      }

      .action-btn {
        position: absolute;
        bottom: 16px;
        // width: 132px;
        height: 24px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.6);
        border-radius: 12px;
        display: flex;
        align-items: center;

        .vr,
        .video,
        .photo {
          width: 44px;
          flex-grow: 0;
          flex: 1;
          border-radius: 12px;
          line-height: 24px;
          text-align: center;
          color: #333;

          &.active {
            background-color: #007ae6;
            color: #fff;
          }
        }
      }

      .video-box {
        position: absolute;
        top: 0;
        width: 100%;
        height: 210px;
        background-color: #000;
        overflow: hidden;
        z-index: 9;

        video {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }

        .close-video {
          position: absolute;
          top: 45px;
          right: 5px;
          font-size: 12px;
          color: #fff;
          background-color: rgba(0, 0, 0, 0.5);
          width: 64px;
          height: 24px;
          line-height: 24px;
          border-radius: 12px;
          text-align: center;
          z-index: 9999;
        }
      }

      .views {
        height: 24px;
        background: rgba(255, 255, 255, 0.85);
        border-radius: 0px 30px 30px 0px;
        position: absolute;
        top: 10px;
        left: 0;
        line-height: 24px;
        color: rgba(19, 40, 77, 1);
        font-size: 12px;
        padding: 0 12px 0 8px;
      }
    }

    .live-play {
      font-size: 14px;
      margin: 16px 16px 2px;
      display: flex;
      justify-content: center;
      align-items: center;

      .live-status {
        flex-basis: 68px;
        background: rgba(255, 156, 56, 1);
        border-radius: 10px;
        font-size: 12px;
        color: #fff;
        padding: 4px 0 3px;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          font-size: 8px;
          margin-right: 4px;
        }
      }

      .live-title {
        flex: 1;
        margin: 0 6px;
        font-weight: 400;
        line-height: 20px;
        color: #445166;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .live-more {
        line-height: 20px;
        color: #445166;

        img {
          width: 12px;
          height: 12px;
        }
      }
    }

    .market-base-info {
      padding: 24px 16px;

      .title-box {
        display: flex;
        align-items: center;

        .title {
          flex: 1;
          font-size: 24px;
          font-weight: 600;
          color: rgba(13, 27, 51, 1);
        }

        .views {
          margin-left: 5px;
          .svg-icon {
            width: 24px;
            height: 24px;
          }
          img {
            width: 24px;
            height: 24px;
          }
        }
      }

      .tags {
        margin-top: 10px;
        font-size: 10px;
        display: flex;
        align-items: center;
        line-height: normal;
        span {
          height: 16px;
          line-height: 16px;
          padding: 1px 4px 0;
          line-height: normal;
          border-radius: 2px;
          margin-right: 5px;
          background: rgba(143, 159, 177, 0.15);
          color: #64686f;

          &.active {
            background: rgba(0, 122, 230, 0.15);
            color: #007ae6;
          }

          &.red {
            background-color: rgba(250, 41, 41, 0.15);
            color: #e65e2e;
          }
        }
      }

      .money {
        margin-top: 18px;
        height: 48px;
        background: rgba(255, 251, 248, 1);
        border-radius: 4px;
        border: 1px solid rgba(240, 232, 220, 1);
        font-size: 14px;
        font-weight: 400;
        color: rgba(177, 124, 65, 1);
        display: flex;
        align-items: center;

        img {
          width: 20px;
          height: 17px;
          margin-left: 12px;
          margin-right: 8px;
        }
      }

      .base-box {
        margin-top: 16px;
        font-size: 14px;
        color: #0d1b33;
        display: flex;
        flex-wrap: wrap;

        .base-item {
          flex-shrink: 0;
          width: 50%;
          margin-bottom: 10px;
        }

        .text {
          width: 42px;
          height: 20px;
          color: #9ca5b5;
        }
      }

      .address,
      .other {
        font-size: 14px;
        display: flex;
        align-items: center;

        .text {
          width: 42px;
          height: 20px;
          color: #9ca5b5;
        }

        p {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #0d1b33;
          margin-left: 4px;
        }

        .icon {
          width: 12px;
          height: 12px;
          margin-left: 5px;
        }
      }

      .address {
        margin-bottom: 10px;
      }
    }

    .tab-box {
      /deep/.van-hairline--top-bottom::after {
        border-width: 0;
      }

      /deep/ .van-tab {
        font-size: 14px;
        color: #9ca5b5;
      }

      /deep/ .van-tab--active {
        color: #333;
        font-weight: 600;
      }

      .title-box {
        display: flex;
        align-items: center;

        .title {
          flex: 1;
          font-size: 18px;
          color: #0d1b33;
          font-weight: 600;
        }

        .more {
          font-size: 12px;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #9ca5b5;

          img {
            width: 12px;
            height: 12px;
          }
        }
      }

      .house-type {
        // border-top: 0.5px solid #e4e6f0;
        padding: 24px 16px;

        .type-swipe-content {
          margin-top: 16px;

          .house-type-item {
            .house-type-img {
              border-radius: 6px;
              background: rgba(248, 248, 248, 1);
              text-align: center;

              img {
                width: 160px;
                height: 120px;
                object-fit: cover;
                border-radius: 6px;
              }
            }

            .house-type-info {
              margin-top: 12px;
              line-height: 1.5;
              // text-align: center;

              .house-type-name {
                font-size: 16px;
                color: #0d1b33;
                font-weight: 600;
              }

              .house-type-area {
                font-size: 12px;
                color: #9ca5b5;
                font-weight: 400;
              }

              .house-type-price {
                font-size: 14px;
                color: #ea4d2e;
                font-weight: 400;
              }
            }
          }
        }
      }

      .house-news {
        // border-top: 0.5px solid #e4e6f0;
        padding-top: 15px;
        padding: 24px 16px 0;

        .news-container {
          color: #13284d;
          line-height: 1.5;
          margin: 16px 0;
          padding-bottom: 16px;

          .news-title {
            font-size: 16px;
            font-weight: 600;
            margin-top: 10px;
            margin-bottom: 6px;
          }

          .news-content {
            font-size: 14px;
            font-weight: 400;
          }

          .news-time {
            margin-top: 10px;
            font-size: 12px;
            color: #9ca5b5;
          }
        }
      }

      .house-circum {
        padding: 24px 16px;
        margin-top: 15px;

        // border-top: 0.5px solid #e4e6f0;
        .tab-box {
          position: relative;
          z-index: 1;

          /deep/ .van-tab {
            font-size: 14px;

            span {
              text-align: left;
            }
          }
        }

        .map-box {
          width: 345px;
          height: 190px;
          border-radius: 10px;
          overflow: hidden;
        }

        .tips {
          margin: 6px 0;
          line-height: 1.5;
          font-size: 12px;
          color: #999;
          font-weight: 400;
          vertical-align: middle;

          img {
            width: 12px;
            height: 13px;
            vertical-align: middle;
            margin-right: 5px;
          }
        }
      }

      .house-recommend {
        // border-top: 0.5px solid #e4e6f0;
        padding: 20px 16px;

        .recommend-swipe-content {
          .recommend-house-item {
            display: flex;
            font-size: 14px;
            margin-top: 15px;

            .market-img {
              width: 120px;
              height: 90px;
              border-radius: 6px;
              overflow: hidden;
              margin: 0 15px 0 0;
              position: relative;

              .headimg {
                width: 100%;
                height: 100%;
                border-radius: 6px;
                object-fit: cover;
              }

              .coupon {
                position: absolute;
                left: 0;
                top: 8px;
                font-size: 12px;
                color: #fff;
                padding: 0 10px 0 5px;
                height: 20px;
                line-height: 20px;
                background-color: #cf562b;
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
              }

              .icon {
                width: 40px;
                height: 40px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -20px;
                margin-top: -20px;
              }
            }

            .market-info {
              flex: 1;
              p {
                margin-bottom: 7px;
              }

              .market-name {
                font-size: 18px;
                font-weight: 600;
                color: rgba(19, 41, 79, 1);
              }

              .market-location {
                font-size: 12px;
                font-weight: 400;
                color: #9ca5b5;
              }

              .market-tags {
                font-size: 10px;
                display: flex;
                align-items: center;
                line-height: normal;
                span {
                  line-height: 16px;
                  padding: 1px 4px 0;
                  border-radius: 2px;
                  margin-right: 5px;
                  background: rgba(143, 159, 177, 0.15);
                  color: #5c5f66;

                  &.active {
                    background-color: rgba(0, 122, 230, 0.15);
                    color: #007ae6;
                  }

                  &.red {
                    background-color: rgba(230, 94, 46, 0.15);
                    color: #e65e2e;
                  }
                }
              }

              .market-price {
                font-size: 14px;
                // font-weight: 600;
                color: rgba(68, 81, 102, 1);
                padding-top: 2px;
              }
            }
          }
        }
      }

      .m-statement {
        padding: 16px 23px 16px 16px;
        background: #ffffff;
        color: #8a9299;
        font-size: 12px;
        line-height: 1.5;

        .feedback {
          color: #525c66;
        }
      }

      .no-ask-data {
        // border-top: 0.5px solid #e4e6f0;
        padding: 16px;
        text-align: center;

        img {
          width: 80px;
          height: 80px;
        }

        .tips {
          font-size: 14px;
          font-weight: 400;
          color: #9ca5b5;
          padding-top: 16px;
        }

        .action-btn {
          display: flex;
          align-items: center;
          justify-content: center;

          .item {
            width: 80px;
            height: 32px;
            border-radius: 22px;
            border: 1px solid rgba(0, 122, 230, 1);
            font-size: 14px;
            font-weight: 500;
            color: rgba(0, 122, 230, 1);
            line-height: 32px;
            margin: 24px 10px;
          }
        }
      }

      .evaluate-box {
        // border-top: 0.5px solid #e4e6f0;
        padding: 24px 16px;

        .evaluate-content {
          margin-top: 20px;
          width: 100%;

          .evaluate-label {
            display: inline-block;
            width: 108px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background: rgba(242, 245, 249, 1);
            border-radius: 4px;
            font-size: 13px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(139, 151, 167, 1);
            margin-bottom: 5px;
          }

          .evaluate-label:nth-child(2) {
            margin: 0 9px;
          }

          .evaluate-detail {
            margin-top: 10px;

            li {
              padding: 10px 0 16px;
              margin-bottom: 10px;

              &:nth-child(2) {
                margin-bottom: 0;
              }

              .top {
                img {
                  width: 36px;
                  height: 36px;
                  border-radius: 18px;
                  margin-right: 15px;
                }

                .message {
                  display: inline-block;
                  font-size: 16px;
                  font-family: PingFangSC-Medium;
                  font-weight: 500;
                  color: #13284d;
                  margin-bottom: 5px;
                  vertical-align: top;

                  span {
                    display: inline-block;
                    width: 60px;
                    height: 20px;
                    text-align: center;
                    line-height: 20px;
                    background: rgba(143, 159, 177, 0.15);
                    border-radius: 2px;
                    font-size: 10px;
                    transform: scale(0.8);
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    color: rgba(92, 95, 102, 1);
                    vertical-align: middle;
                  }

                  i {
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    margin-right: 5px;
                  }
                }
              }

              .bottom {
                font-size: 14px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: #13284d;
                line-height: 21px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                vertical-align: top;
                vertical-align: middle;
                margin-left: 50px;

                img {
                  width: 15px;
                  height: 12px;
                  vertical-align: middle;
                  margin-left: 5px;
                }
              }
            }
          }

          .hint {
            font-size: 13px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
          }

          .go-evaluate {
            position: relative;
            display: inline-block;
            width: 82px;
            height: 30px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(68, 81, 102, 1);
            line-height: 30px;
            text-align: center;
          }
        }
      }

      .buy-ask {
        // border-top: 0.5px solid #e4e6f0;
        padding: 24px 16px;

        .not-question {
          width: 92%;
          margin-left: 4%;
          height: 103px;
          background: rgba(248, 250, 252, 1);
          border: 1px solid rgba(205, 214, 225, 1);
          margin-top: 5px;
          display: flex;
          flex-direction: column;

          .hint {
            font-size: 13px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            text-align: center;
            justify-content: center;
          }

          .go-evaluate {
            position: relative;
            display: flex;
            margin-top: 12px;
            display: inline-block;
            width: 82px;
            height: 30px;
            // border-radius: 4px;
            // border: 1px solid rgba(68, 81, 102, 1);
            font-size: 13px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(68, 81, 102, 1);
            line-height: 30px;
            text-align: center;
            justify-content: center;
            margin-left: 40%;
          }
        }

        .ask-content {
          margin-top: 25px;
          width: 100%;

          .admin-label {
            width: 50px;
            height: 15px;
            background: rgba(143, 159, 177, 0.15);
            border-radius: 2px;
            font-size: 10px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(92, 95, 102, 1);
            margin-left: 13px;
            margin-top: 2px;
            line-height: 15px;
            text-align: center;
            padding-top: 2px;
          }

          li:nth-child(1) {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 16px;
            margin-top: -4px;

            div {
              display: flex;
              align-items: center;
            }

            span:nth-of-type(1) {
              display: inline-block;
              width: 18px;
              height: 18px;
              background: rgba(235, 108, 82, 1);
              border-radius: 3px;
              text-align: center;
              line-height: 18px;
              font-size: 10px;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              color: rgba(255, 255, 255, 1);
              margin-right: 8px;
            }

            span:nth-of-type(2) {
              display: inline-block;
              font-size: 14px;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              color: #13284d;
              width: 225px;
              line-height: 23px;
            }

            p {
              font-size: 14px;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
            }
          }

          li:nth-child(2) {
            padding-bottom: 16px;

            span {
              display: inline-block;
              text-align: center;
              line-height: 18px;
              width: 18px;
              height: 18px;
              background: rgba(0, 122, 230, 1);
              border-radius: 3px;
              font-size: 10px;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              color: rgba(255, 255, 255, 1);
            }

            div {
              display: flex;
              align-items: center;

              img {
                width: 16px;
                height: 16px;
                margin: 0 8px;
                border-radius: 50%;
              }

              i:nth-of-type(1) {
                font-size: 12px;
                font-style: normal;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
              }

              i:nth-of-type(2) {
                font-size: 12px;
                font-style: normal;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(153, 153, 153, 1);
                margin-left: 5px;
              }
            }

            p {
              font-size: 14px;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              color: #13284d;
              line-height: 21px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              margin: 8px 0 0 28px;
            }
          }
        }

        .evaluate-content-nodata {
          font-size: 12px;
          background: rgba(248, 250, 252, 1);
          border: 1px dashed rgba(205, 214, 225, 1);
          text-align: center;
          padding: 20px;
          margin: 16px;

          p {
            padding-bottom: 20px;
            color: #969ea8;
          }

          button {
            border: 1px solid #445166;
            border-radius: 4px;
            color: #445166;
            height: 30px;
            padding: 6px 16px;
            background-color: #f8fafc;
          }
        }

        .hint {
          font-size: 13px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
        }

        .go-evaluate {
          position: relative;
          display: inline-block;
          width: 82px;
          height: 30px;
          font-size: 13px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(68, 81, 102, 1);
          line-height: 30px;
          text-align: center;
        }
      }

      .evaluate-box,
      .buy-ask {
        .go-btn {
          height: 44px;
          background: rgba(245, 246, 247, 1);
          border-radius: 6px;
          font-size: 16px;
          font-weight: 500;
          color: rgba(0, 122, 230, 1);
          line-height: 44px;
          text-align: center;
          i {
            margin-right: 5px;
          }
        }
      }

      .source-box {
        background-color: #fff;
        padding: 20px 16px;

        // border-top: 0.5px solid #e4e6f0;
        .poster-box {
          // border-bottom: 0.5px solid #e4e6f0;
          margin-bottom: 30px;
          .poster-list {
            margin-top: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .item {
              width: 164px;
              border-radius: 4px;
              overflow: hidden;
              background-color: #fff;

              .pic {
                width: 164px;
                height: 228px;
                border-radius: 4px 4px 0px 0px;

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }

              .title {
                max-height: 40px;
                font-size: 14px;
                font-weight: 400;
                color: rgba(19, 40, 77, 1);
                line-height: 20px;
                overflow: hidden;
                margin: 8px 12px;
              }

              .time {
                font-size: 10px;
                font-weight: 400;
                color: rgba(156, 165, 181, 1);
                line-height: 12px;
                padding: 0 12px 12px;
              }
            }
          }
        }

        .news-box {
          // border-bottom: 0.5px solid #e4e6f0;
          .news-list {
            margin-top: 16px;

            .item {
              display: flex;
              margin-bottom: 8px;
              background-color: #fff;
              border-radius: 6px;
              padding: 16px 0;

              .left-box {
                flex: 1;

                .title {
                  height: 40px;
                  font-size: 14px;
                  font-weight: 400;
                  color: rgba(19, 40, 77, 1);
                  line-height: 20px;
                  overflow: hidden;
                  padding-right: 16px;
                }

                .info {
                  margin-top: 24px;
                  font-size: 12px;
                  font-weight: 400;
                  color: rgba(156, 165, 181, 1);
                  display: flex;
                  height: 16px;

                  .create {
                    margin-right: 10px;
                    max-width: 80px;
                    overflow: hidden;
                  }
                }
              }

              .pic {
                width: 108px;
                height: 80px;
                border-radius: 4px;
                overflow: hidden;

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }
            }
          }
        }

        .video-box {
          margin-top: 30px;

          .video-list {
            margin-top: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .item {
              max-width: 164px;

              .pic {
                width: 164px;
                height: 96px;
                border-radius: 6px;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                background-clip: content-box;

                .play-icon {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  img {
                    width: 40px;
                    height: 40px;
                  }
                }
              }

              .title {
                font-size: 14px;
                font-weight: 400;
                color: rgba(19, 40, 77, 1);
                height: 20px;
                line-height: 20px;
                width: 100%;
                overflow: hidden;
                margin: 8px 0 4px;
              }

              .time {
                height: 16px;
                font-size: 12px;
                font-weight: 400;
                color: rgba(156, 165, 181, 1);
                line-height: 16px;
              }
            }
          }
        }
      }

      .no-source-data {
        // border-top: 0.5px solid #e4e6f0;
        width: 100%;
        padding: 40px 0;
        text-align: center;
        color: #999;
        font-size: 12px;
        background-color: #fff;

        img {
          width: 88px;
          height: 88px;
        }
        p {
          font-size: 14px;
          font-weight: 400;
          color: #9ca5b5;
          padding-top: 16px;
        }
      }

      .learn-box {
        padding: 24px 16px;

        // border-top: 0.5px solid #e4e6f0;
        .item-box {
          margin-bottom: 40px;

          .video {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            .item-info {
              margin-bottom: 0;
              .title {
                height: 20px;
                overflow: hidden;
              }
              &:nth(2n + 2) {
                margin-right: 0;
              }
            }
            &.one {
              .item-info {
                flex: 1;
              }
            }
          }

          .item-info {
            margin: 16px 0;

            .item-other {
              min-width: 164px;
              height: 193px;
              border-radius: 6px;
              overflow: hidden;
              position: relative;
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center;
              background-clip: content-box;

              .pdf {
                position: absolute;
                right: 0;
                top: 0;
                width: 33px;
                height: 15px;
                background: rgba(250, 100, 0, 1);
                border-radius: 0 0 0 6px;
                color: #fff;
                text-align: center;
                font-size: 10px;
                line-height: 15px;
              }

              .play-icon {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                  width: 40px;
                  height: 40px;
                }
              }

              .info {
                position: absolute;
                bottom: 16px;
                left: 16px;
                right: 16px;
                color: #fff;
                text-shadow: 0 0 5px #000;

                .title {
                  font-size: 16px;
                  font-weight: 600;
                }

                .time {
                  font-size: 12px;
                  margin-top: 8px;
                }
              }
            }

            .item-h5 {
              // border: 0.5px solid #e4e6f0;
              // border-style: solid none;
              .cnt {
                display: flex;
                padding: 10px 0;
              }
              .info {
                flex: 1;
                .title {
                  height: 40px;
                  font-size: 16px;
                  font-weight: 400;
                  color: rgba(19, 40, 77, 1);
                  line-height: 20px;
                  overflow: hidden;
                  padding-right: 16px;
                }
                .time {
                  height: 12px;
                  vertical-align: bottom;
                  color: #9ca5b5;
                  margin-top: 28px;
                }
              }

              .pic {
                width: 108px;
                height: 80px;
                border-radius: 4px;
                overflow: hidden;

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }
            }
          }
        }
      }

      .empty-learn {
        // border-top: 0.5px solid #e4e6f0;
        text-align: center;
        padding: 40px 0;

        img {
          height: 88px;
          width: 88px;
        }

        p {
          font-size: 14px;
          font-weight: 400;
          color: #9ca5b5;
          padding-top: 16px;
        }
      }
    }
  }

  .bottom-action {
    .free-btn {
      height: 44px;
      background: #007ae6;
      border-radius: 6px;
      margin: 8px 16px;
      line-height: 44px;
      font-size: 16px;
      font-weight: 500;
      color: #fff;
      text-align: center;
    }

    .expire {
      height: 44px;
      border-radius: 6px;
      margin: 8px 16px;
      color: #ea4d2e;
      border: 1px solid #ea4d2e;
      line-height: 44px;
      text-align: center;
      font-size: 16px;
    }

    .tips-box {
      height: 28px;
      background: rgba(252, 229, 224, 1);
      font-size: 12px;
      font-weight: 400;
      color: rgba(234, 77, 46, 1);
      line-height: 28px;
      padding-left: 12px;
      display: flex;
      align-items: center;
      text-align: center;
      span {
        flex: 1;
      }

      button {
        width: 52px;
        height: 20px;
        line-height: 20px;
        background: rgba(234, 77, 46, 1);
        border-radius: 2px;
        color: #fff;
        font-size: 10px;
        border: none;
        margin: 0 16px;
      }
    }

    .btn-box {
      box-shadow: 0 -1px 1px #eee;
      margin-top: 1px;
      display: flex;
      align-items: center;
      font-size: 10px;
      color: #40516f;
      padding: 12px 16px;

      .stick,
      .show,
      .share {
        flex: 1;
        text-align: center;

        &.active {
          color: #007ae6;

          .iconfont {
            color: #007ae6;
          }
        }
      }

      .iconfont {
        font-size: 24px;
        color: #40516f;
      }
    }
  }

  .img-preview {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;

    // align-items: center;
    // justify-content: center;
    .title {
      height: 80px;
      line-height: 80px;
      padding: 0 20px;
      font-size: 24px;
      color: rgba(51, 51, 51, 1);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-shadow: border-box;
    }

    .img-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      // margin: 0 20px;
      text-align: center;

      .van-swipe {
        height: 100%;
      }

      .van-swipe-item {
        line-height: 100%;
        vertical-align: middle;

        img {
          min-width: 100%;
          min-height: 100%;
          object-fit: cover;
        }
      }
    }

    .custom-indicator {
      height: 60px;
      line-height: 60px;
      padding: 0 20px;
      text-align: center;
      font-size: 16px;
      color: rgba(51, 51, 51, 1);
    }
  }

  .signin {
    position: fixed;
    top: 340px;
    right: 8px;
    width: 80px;
    height: 64px;
    z-index: 999;
    animation-name: scaleDraw;
    /*关键帧名称*/
    animation-timing-function: ease;
    /*动画的速度曲线*/
    animation-iteration-count: infinite;
    /*动画播放的次数*/
    animation-duration: 2s;

    /*动画所花费的时间*/
    img {
      max-width: 100%;
      max-height: 100%;
    }
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.5s ease;
  }

  .fade-enter,
  .fade-leave-to

  /* .fade-leave-active below version 2.1.8 */
 {
    opacity: 0;
    transform: translateX(60px);
  }

  .activity-model {
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;

    .pic-box {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .pic {
        width: 320px;
        height: 550px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .close {
        position: absolute;
        right: 10px;
        top: 10px;

        img {
          width: 30px;
          height: 30px;
        }
      }
    }
  }

  @keyframes scaleDraw {
    /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
    0% {
      transform: scale(1);
      /*开始为原始大小*/
    }

    25% {
      transform: scale(1.1);
      /*放大1.1倍*/
    }

    50% {
      transform: scale(1);
    }

    75% {
      transform: scale(1.1);
    }
  }

  .poster-container {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.6);

    .cnt {
      width: 290px;
      height: 500px;
      overflow: hidden;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -145px;
      margin-top: -250px;
      -webkit-user-select: none;
      user-select: none;

      .poster-img {
        position: relative;
        width: 101%;
        height: 101%;
        border-radius: 5px;

        img {
          width: 290px;
          height: 500px;
          border-radius: 5px;
        }

        .close-icon {
          position: absolute;
          right: 0;
          top: 0;
          width: 100px;
          height: 100px;
          text-align: right;

          img {
            width: 24px;
            height: 24px;
            margin: 5px 10px;
          }
        }
      }
    }
  }
}
</style>
